<template>
  <div>
    <!-- 导航搜索时间选择 -->
    <el-card class="box-card">
      <el-row type="flex" class="row-bg" justify="end">

           <el-col :span="4" :offset="14">
          <el-select
            style="width:200px"
            v-model="searchObj.value"
            :placeholder="selectMsg"
            v-if="selectBoolen"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>

        <el-col :span="4" :offset="1">
          <el-input style="width:250px" v-model="searchObj.search" :placeholder="titMsg"></el-input>
        </el-col>

        <el-col :span="4" :offset="1" v-if="selectTime">
          <el-date-picker
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="searchObj.firstTime"
            placeholder="选择开始日期"
          ></el-date-picker>
        </el-col>
        <el-col :span="4" :offset="1" v-if="selectTime">
          <el-date-picker
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="searchObj.endTime"
            placeholder="选择结束日期"
          ></el-date-picker>
        </el-col>

     

        <el-col :span="4" :offset="1">
          <div style="display:flex">
            <el-button type="primary" @click="searchBtn">查询</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    options: Array,
    selectBoolen: Boolean,
    selectTime: Boolean,
    titMsg:String,
    selectMsg:String
  },
  data() {
    return {
      searchObj: {
        search: "",
        firstTime: "",
        endTime: "",
        value: ""
      },
      resets: "reseta"
    };
  },
  methods: {
    searchBtn() {
      console.log("查询");
      this.$emit("searchvalue", this.searchObj);
    },
    // 重置功能
    reset() {
      this.searchObj = {};
      this.$emit("searchreset", this.resets);
      console.log("重置");
    }
  }
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 98%;
  height: 80px;
  margin: 0 auto;
}
</style>